<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>New Order History Page</title>
    <link rel="stylesheet" href="new-content.css" />
  </head>
  <body>
    <div id="content" class="content-panel">
        <div ng-view="" class="ng-scope"><div class="container ng-scope" ng-controller="OrderHistoryController">
            <!--// TOP BAR //-->
            <div class="panel topbar">
                <div class="panel-body">
                    <div class="topbar-heading">
                        <div class="topbar-title">
                            <h1 class="ng-binding">Order History</h1>
                        </div>
                    </div>
        
                    <div class="topbar-action pull-right">
                        <a id="btnPurchaseCredit" ng-href="#/store/promopackages?product_id=1" ng-click="trackingForPurchase()" class="btn btn-primary ng-isolate-scope" ss-user-permission="#toggle.online_purchase" ss-translate-once="ORDER_LABEL_PURCHASE_CREDITS" href="#/store/promopackages?product_id=1">Purchase Credits</a>
                    </div>
                    <ul class="nav nav-pills pull-right">
                        <li class="active"><a href="#/order-history" ng-bind="'ORDER_LABEL_ORDER_HISTORY' | translate" class="ng-binding">Order History</a></li>
                        <li><a href="#/credits" ng-bind="'ORDER_LABEL_CREDIT_USAGE' | translate" class="ng-binding">Credit Usage</a></li>
                        <li><a href="#/pending-payments" ss-user-permission="#toggle.online_purchase" ng-bind="'ORDER_LABEL_PENDING_PAYMENT' | translate" class="ng-binding ng-isolate-scope">Pending Payment</a></li>
                    </ul>
                </div>
            </div>
            <!--// TOP BAR END //-->
        

            
            <!--// NEW CONTENT //-->
            <div id="new-content" ng-if="hasRecords()" class="ng-scope">
                <!-- 表头 -->
                <div class="row t-header">
                    <div class="col-sm-5 col-xs-12">
                        Package name
                    </div>
                    <div class="col-sm-2 col-xs-6">
                        Order date
                    </div>
                    <div class="col-sm-2 col-xs-6">
                        Expiry date
                    </div>
                    <div class="col-sm-3 col-xs-12">
                        Invoice no.
                    </div>
                </div>
                <!-- 表头 end -->

                <!-- 表主体 -->
                <div class="row t-body">

                    <div class="col-sm-5">
                        <!-- 10 Job Posting Package - (FY21-2) -->
                        Packages with a very very long long name that dont need to go 2 lines
                        Packages with a very very long long name that dont need to go 2 lines
                        Packages with a very very long long name that dont need to go 2 lines
                        Packages with a very very long long name that dont need to go 2 lines
                    </div>
                    <div class="col-sm-2">
                        29 Jul 2020
                    </div>
                    <div class="col-sm-2">
                        29 Aug 2020
                    </div>
                    <div class="col-sm-3">
                        MYKLINV/2993817
                    </div>

                    <!-- <div class="col-sm-5">
                        Monthly Lite Ad package
                    </div>
                    <div class="col-sm-2">
                        25 Jul 2020
                    </div>
                    <div class="col-sm-2">
                        25 Aug 2020
                    </div>
                    <div class="col-sm-3">
                        MYKLINV/2993817
                    </div>

                    <div class="col-sm-5">
                        Packages with a very very long long name that dont need to go 2 lines
                        Packages with a very very long long name that dont need to go 2 lines
                    </div>
                    <div class="col-sm-2">
                        16 Jul 2020
                    </div>
                    <div class="col-sm-2">
                        16 Aug 2020
                    </div>
                    <div class="col-sm-3">
                        MYKLINV/2377661
                    </div>

                    <div class="col-sm-5">
                        10 Country Job Posting Package - (FY21-2)
                    </div>
                    <div class="col-sm-2">
                        13 Jul 2020
                    </div>
                    <div class="col-sm-2">
                        13 Jul 2020
                    </div>
                    <div class="col-sm-3">
                        MYKLINV/2817726
                    </div> -->
                </div>
                <!-- 表主体 end-->
            </div>
            <!--// NEW CONTENT END //-->

        
            <!--PAGINATOR-->
            <div class="col-xs-12 ng-scope" ng-if="hasRecords()">
                <div class="panel panel-clear">
                    <div ss-paginator-config="paginator" class="ng-isolate-scope">
                        <!-- Page-jump input field -->
                        <div class="pull-right">
                            <ul class="pagination">
                                <!-- List of pages -->
                                <!-- ngIf: paginator.currentPage !== 1 -->
                            </ul>
                            <ul class="pagination">
                                <!-- ngIf: paginator.currentPage !== 1 -->
                                <!-- ngRepeat: page in paginator.displayedPages --><!-- ngIf: paginator.displayedPageNumbers !== 0 --><li ng-if="paginator.displayedPageNumbers !== 0" ng-repeat="page in paginator.displayedPages" ng-class="{active: page == paginator.currentPage }" class="ng-scope active">
                                    <a id="linkPage1" style="cursor: pointer" ng-click="paginator.triggerSearch(page)" class="ng-binding">
                                        1
                                    </a>
                                </li><!-- end ngIf: paginator.displayedPageNumbers !== 0 --><!-- end ngRepeat: page in paginator.displayedPages -->
                                <!-- ngIf: paginator.displayedPageNumbers === 0 && paginator.currentPage !== 1 -->
                                <!-- ngIf: paginator.currentPage * paginator.displayedDataNumbers < paginator.totalRecords -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!--PAGINATOR END-->

        </div>
    </div>
    </div>
  </body>
</html>
